<template>
  <div class="big">
    <div class="top">
      <div class="top-left" @click="gologin">
        <img src="./images/首页01-左上角灯.png" alt="" />
      </div>
      <div class="top-center">
        <span>首页</span>
      </div>
      <div class="top-right">
        <img src="./images/首页02-右上角搜索.png" alt="" />
      </div>
    </div>
    <div class="middle">
      <div class="middle-top">
        <img src="./images/首页03-轮播图.png" alt="">
      </div>
      
      <div class="middle-center"  v-for="i in count" :key="i.id">
        <div class="middle-center-left" v-for="item in countimg" :key="item.id"> 
          <img :src="item.imgurl" alt="">
          <div class="left-word">
             <span>{{item.span}}</span>
          </div>
        </div>

        <div class="middle-center-right" v-for="item in countimg" :key="item.id"> 
          <img :src="item.imgurlr" alt="">
          <div class="right-word">
             <span>{{item.spanr}}</span>
          </div>
        </div>
      </div>
      
    </div>

    <div class="bottom">
      <div class="bottom-one" v-for="(item,index) in 1" :key="index">
        <button>
          <img src="./images/首页08-充值优惠.png" alt="" style=" width: 21px; height: 35px;">
          <span>充值优惠</span>
        </button>

        <button>
          <img src="./images/首页09-积分商城.png" alt="" style=" width: 44px; height: 35px;">
          <span>积分商城</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
export default {
  name: "IndexHome", //首页
  setup(){
    let router = useRouter()

    let countimg = reactive([
        {
          id:0,
          imgurl : require("/src/pages/Home/images/首页04-预约洗护美容.png"),
          imgurlr: require("/src/pages/Home/images/首页05-预约住宿.png"),
          span:'预约洗护美容',
          spanr:'预约住宿'
        },
        {
          id:1,
          imgurl: require("/src/pages/Home/images/首页06-萌宠选购.png"),
          imgurlr: require("/src/pages/Home/images/首页07-上门接宝贝.png"),
          span:'萌宠选购',
          spanr:'上门接宝贝'
        }
    ])

    function gologin(){
      router.push({
        name:'login'
      })
    }

    return{
      count:1,
      countimg,
      gologin,
    }
  }
};
</script>

<style lang='less' scoped>
.big {
  margin: 0;
  padding: 0;
  position: relative;

  .top {
    width: 100%;
    height: 4rem;
    background-color: rgb(135, 142, 205);
    position: absolute;

    .top-left {
      width: 2rem;
      height: 2rem;
      position: absolute;
      margin-left: 1.25rem;
      padding-top: 0.9375rem;
    }
    .top-left img {
      width: 2rem;
      height: 2rem;
    }
    .top-center {
      width: 4.375rem;
      height: 3.75rem;
      font-size: 1.9375rem;
      position: absolute;
      margin-left: 9.95rem;
      margin-top: 0.625rem;
    }
    .top-right {
      width: 2.5rem;
      height: 2.5rem;
      position: absolute;
      margin-left: 20.25rem;
      margin-top: 0.9375rem;
    }
    .top-right img {
      width: 2.5rem;
      height: 2.5rem;
    }
  }

  .middle {
    width: 100%;
    height: 43.6875rem;
    background-color: rgb(185, 187, 223);
    position: absolute;
    margin-top: 4rem;
    background-image: url("./images/首页10-背景爪子.png");
    background-repeat: no-repeat;
    background-size: 11.25rem 10.25rem;
    .middle-top {
      width: 21.0625rem;
      height: 12.5rem;
      // background-color: orange;
      margin-left: 1.25rem;
      margin-top: 1.25rem;
    }
    .middle-top img{
      width: 21.0625rem;
      height: 9.5rem;
    }

    .middle-center{
      width: 9.3125rem;
      height: 6.5rem;
      margin-left: 1.1rem;
      margin-top: -1.875rem;
    }

    .middle-center-left{
      width: 9.3125rem;
      height: 7.5rem;
      border-radius: 1.5rem;
      background-color: white;
      margin-left: .9375rem;
      margin-top: .9375rem;
      position: relative;
      top: -.9375rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .middle-center-left img{
      width: 3.125rem;
      height: 2.5625rem;
      margin-top: -2.625rem;
      margin-left: 3.1rem;
      display: block;
    }
    .left-word{
      width: 9.125rem;
      height: 2.5625rem;
      margin-top: 4.125rem;
      margin-left: -1.875rem;
      text-align: center;
    }
    .middle-center-left span{
      // width: 9.125rem;
      // height: 2.5625rem;
      margin-top: 3.25rem;
      margin-left: -4.3125rem;
      text-align: center;
    }
    .middle-center-right{
      width: 9.3125rem;
      height: 7.5rem;
      border-radius: 1.5rem;
      background-color: white;
      margin-left: 11.25rem;
      margin-top: .9375rem;
      position: relative;
      top: -17.9375rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .middle-center-right img{
      width: 3.125rem;
      height: 2.5625rem;
      margin-top: -2.625rem;
      margin-left: 3.1rem;
      display: block;
    }
    .right-word{
      width: 9.125rem;
      height: 2.5625rem;
      margin-top: 4.125rem;
      margin-left: -2.75rem;
      text-align: center;
    }
    .middle-center-right span{
      // width: 9.125rem;
      // height: 2.5625rem;
      margin-top: 3.25rem;
      margin-left: -3.3125rem;
      text-align: center;
    }
  }

  .bottom{
    width: 100%;
    height: 12rem;
    // background-color: pink;
    position: absolute;
    margin-top: 31rem;
    
    .bottom-one{
      width: 19.6875rem;
      height: 3.125rem;
      border-radius: 1.875rem;
      margin-left: 1.875rem;
      margin-top: 1.875rem;
      // background-color: orange;
      button{
      width: 19.6875rem;
      height: 3.125rem;
      border-radius: 1.875rem;
      background-color: white;
      margin-top: 1.25rem;
      }
      button img{
        margin-left: -3.5rem;
      }
      button span{
        position: absolute;
        left: 0;
        right: 0;
        margin-left: 2.5rem;
        margin-top: .625rem;
        vertical-align: middle;
      }
    }
  }
}
</style>